<template>
	<div class="menuAndFilm">
		<div class="menu flex">
			<!--左侧地区选择-->
			<a class="flex" href="javascript:void(0);">广州</a>
			<!--中间tab选项卡菜单-->
			<ul class="tab flex">
				<li v-for="item in list"  @click="curComponent = item">{{item}}</li>
			</ul>
			<!--搜索按钮-->
			<div class="flex searchLogo"><img src="../../dist/img/icons/search.png"/></div>
		</div>
		<!--电影显示内容-->
		<film-content :is="curComponent"></film-content>
	</div>
</template>

<script>
import filmContent from '@/components/filmContent.vue'
import redfilm from '@/components/redfilm.vue'


export default {
	name: 'indexMenu',
	props: {
	   msg: String
	},
	components: {
	    filmContent,
	    redfilm
	},
	data(){
		return {
			curComponent:"filmContent",
			list:["filmContent","redfilm"]
		}
	}
}
</script>

<style lang="scss">
	@import "../scss/common";
	.menuAndFilm{
		width: 100%;
		.menu{
			height: r(80px);
			width: 100%;
			background: rgb(255,255,255);
			border-bottom: r(2px) solid #DDDDDD;
			justify-content: space-between;
			position: fixed;
			top: r(89px);
			left: 0;
			background: white;
			z-index:2;
			a{
				width: r(110px);
				font-size: r(26px);
				text-decoration: none;
				color: #666;
				justify-content: center;
				align-items: center;
				
			}
			ul{
				justify-content: center;
				align-items: center;
				li{
					width: 50%;
					padding: r(0px) r(25px);
					font-weight: bold;
					list-style: none;
					font-size: r(25px);
					color: #666;
				}
			}
			.searchLogo{
				width: r(110px);
				justify-content: center;
				align-items: center;
				img{
					width: r(35px);
					height: r(35px);
				}
			}
		}
		.filmContent{
			width: 100%;
			margin-top: r(170px);
		}
		/*点击效果*/
		.active{
			color: $themeColor;
		}
	}
</style>